<template>
	<div id="MyPrize">
		<div v-if="prizeList == ''" class="nodata">
			<img src="../assets/images/home/nodata.png" alt="" />
		</div>
		<div class="myprize-list" v-else>
			<div class="myprize-item" v-for="item in prizeList">
				<div class="item-time">{{item.add_time.substr(11,5)}}</div>
				<div class="item-prize">
					<div class="thumb" :style="{'background-image': 'url(' + item.lottery_prize.prize_img +  ')'}"></div>
					<div class="desc">
						<p class="text text1">{{item.lottery_title}}</p>
						<p class="text">{{item.prize_title}}</p>
					</div>
					<div class="item-date">{{item.add_time}}</div>
					<div class="prize-code">
						<p>兑奖码</p>
						<p class="code">{{item.draw_code}}</p>
					</div>
				</div>
			</div>
		</div>
		<p class="service-text">
			<a href="#">添加客服微信L03715555凭兑奖码和手机号进行兑奖</a>
		</p>
		<bottom></bottom>
	</div>
</template>

<script>
	import $ from 'jquery';
	import axios from 'axios';
	import {} from 'vux';
	import bottom from './ActiveFooter'
	export default {
		data() {
			return {
				lottery_id: '1',
				prizeList: []
			}
		},
		components: {
			bottom
		},

		mounted() {
			this.getPrizeRecord();
		},
		//方法
		methods: {
			getPrizeRecord: function() {
				let _this = this;
				let more = true;
				let page = 1;
				this.$http({
					methods: 'GET',
					url: '/los/api/lottery/draw_list.json?lottery_id=' + this.lottery_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.prizeList = result.data.data;
					} else {
						this.prizeList = ''
					}
				}).catch((err) => {

				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/lottery/draw_list.json?lottery_id=' + _this.lottery_id + '&page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.prizeList.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});

						}
					}
				})
			},
		},
	}
</script>

<style scoped>
	#MyPrize {}
	
	.myprize-list {
		padding: 0 0.26666rem;
	}
	
	.myprize-list .myprize-item .item-time {
		padding: 0.26666rem 0;
		text-align: center;
		font-size: 0.37333rem;
		color: #aaa;
	}
	
	.myprize-list .myprize-item .item-prize {
		position: relative;
		padding-top: 1.06666rem;
		padding-left: 0.53333rem;
		width: 100%;
		height: 3.73333rem;
		background: url(../assets/images/home/myprize_bg.png) center center no-repeat;
		background-size: 100% 100%;
	}
	
	.myprize-list .myprize-item .item-prize .thumb {
		float: left;
		width: 1.73333rem;
		height: 1.04rem;
		background-position: center -14px;
		background-size: 140%;
	}
	
	.myprize-list .myprize-item .item-prize .desc {
		width: 5.2rem;
		padding-left: 0.26666rem;
		overflow: hidden;
	}
	
	.myprize-list .myprize-item .item-prize .desc .text {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 0.34666rem;
		line-height: 1.1;
	}
	
	.myprize-list .myprize-item .item-prize .desc .text.text1 {
		padding-top: 0.06666rem;
		padding-bottom: 0.24rem;
	}
	
	.myprize-list .myprize-item .item-prize .prize-code {
		position: absolute;
		top: 1.97333rem;
		right: 0.33333rem;
		width: 1.06666rem;
		height: 0.66666rem;
	}
	
	.myprize-list .myprize-item .item-prize .prize-code p {
		color: #ff9358;
	}
	
	.myprize-list .myprize-item .item-prize .prize-code .code {
		font-family: "trebuchet ms";
	}
	
	.myprize-list .myprize-item .item-prize .item-date {
		margin-top: 1.04rem;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.service-text {
		padding: 0.66666rem 0;
		text-align: center;
	}
	
	.service-text a {
		color: #aaa;
		text-decoration: underline;
	}
	
	.nodata {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto;
	}
	
	.nodata img {
		width: 100%;
	}
</style>